<template>
    <el-card shadow="never" :style="{ height: rowHeight }" body-style="padding-bottom: 0">
        <UserListSearch v-model:searchData="searchData" @getUserList="getUserList" />
    </el-card>
    <el-card style="margin-top: 16px;" shadow="never">
        <el-tabs v-model="activeType" class="demo-tabs">
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane label="微信公众号" name="微信公众号"></el-tab-pane>
            <el-tab-pane label="微信小程序" name="微信小程序"></el-tab-pane>
            <el-tab-pane label="H5" name="H5"></el-tab-pane>
            <el-tab-pane label="PC" name="PC"></el-tab-pane>
            <el-tab-pane label="APP" name="APP"></el-tab-pane>
        </el-tabs>

        <div style="margin-bottom: 16px;">
            <el-button type="primary" @click="openForm?.openForm()">添加用户等级</el-button>
            <el-button>发送优惠卷</el-button>
            <el-button>批量设置分组</el-button>
            <el-button>批量设置标签</el-button>
            <el-button>导出</el-button>
        </div>
        <el-table :data="groupData" style="width: 100%; font-size: 12px;" @sort-change="onOrder"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#333', padding: '0,10px' }">

            <el-table-column type="expand">
                <template #default="scoped">
                    <el-descriptions :column="4" style="padding-left: 60px;">
                        <el-descriptions-item label="首次访问:">{{ scoped.row.register_time }}</el-descriptions-item>
                        <el-descriptions-item label="近次访问:">{{ scoped.row.last_login_time }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号:">{{ scoped.row.IDNumber }}</el-descriptions-item>
                        <el-descriptions-item label="真实姓名:">{{ scoped.row.name }}</el-descriptions-item>
                        <el-descriptions-item label="标签:">
                            <el-space>
                                <el-tag type="primary" v-for="item in scoped.row.tagIds" :key="item._id">{{ item.name
                                }}</el-tag>
                            </el-space>
                        </el-descriptions-item>
                        <el-descriptions-item label="生日:">{{ scoped.row.birth }}</el-descriptions-item>
                        <el-descriptions-item label="推荐人:">无</el-descriptions-item>
                        <el-descriptions-item label="地址:">{{ scoped.row.address }}</el-descriptions-item>
                        <el-descriptions-item label="备注:">{{ scoped.row.remark }}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="_id" label="用户ID" width='220px' />
            <el-table-column label="头像">
                <template #default="scoped">
                    <img :src="scoped.row.avatar" alt="" height="36px">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="" label="付费会员">
                <template #default="scoped">
                    <span>{{ scoped.row.vip ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="gradeId.name" label="用户等级">
            </el-table-column>
            <el-table-column prop="groupId.name" label="分组">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
                <template #default="scoped">
                    <span>{{ scoped.row.phone ? scoped.row.phone.slice(0, 3) + '****' + scoped.row.phone.slice(7)
                        : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="用户类型" />
            <el-table-column label="余额" sortable="custom">
                <template #default="scoped">
                    <span>{{ scoped.row.balance.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140px">
                <template #default>
                    <div
                        style="display: flex; justify-content: center; align-items: center; width: 90px; color: var(--el-color-primary);">
                        <span style="margin-right: 14px; margin-top: 1px; line-height: 13px;" class="el-dropdown-link">
                            详情
                        </span>
                        <el-dropdown>
                            <span class="el-drop down-link el-dropdown-link">
                                更多
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>修改余额</el-dropdown-item>
                                    <el-dropdown-item>修改积分</el-dropdown-item>
                                    <el-dropdown-item>赠送会员</el-dropdown-item>
                                    <el-dropdown-item>设置分组</el-dropdown-item>
                                    <el-dropdown-item>设置标签</el-dropdown-item>
                                    <el-dropdown-item>修改上级推广人</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[4, 8, 10]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="total" />
        </div>
        <UserListInfoForm></UserListInfoForm>
        <AddUserList ref="openForm"></AddUserList>
    </el-card>
</template>

<script setup lang="ts">
import AddUserList from './AddUserList.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { getUserListApi } from '@/api/userList';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import UserListInfoForm from './UserListInfoForm.vue'
import UserListSearch from './UserListSearch.vue';
const groupData = ref([]);
const total = ref(0);
const rowHeight = ref('70px');
const activeType = ref('')
const orderItem = ref(0);
const searchData = ref({
    searchType: '',
    searchValue: '',
    searchLevel: '',
    searchGroup: '',
})
const pageData = ref({
    currentPage: 1,
    pageSize: 4,
});
const openForm = useTemplateRef<any>('openForm');


onMounted(() => {
    getUserList();
});

watch([pageData, activeType, orderItem], () => {
    getUserList();
}, { deep: true })


async function getUserList() {
    const res: any = await getUserListApi({
        ...pageData.value, type: activeType.value, balanceSort: orderItem.value,
        gradeId: searchData.value.searchLevel, groupId: searchData.value.searchGroup,
    });
    if (res.code == 200) {
        groupData.value = res.data.rows;
        total.value = res.data.total
    } else {
        ElMessage.error(res.message);
    }
}
const onOrder = (order: any) => {
    console.log(order.order);
    if (order.order == 'ascending') {
        orderItem.value = 1;
    } else if (order.order == 'descending') {
        orderItem.value = -1;
    } else {
        orderItem.value = 0;
    }
}
</script>

<style scoped></style>
<style>
.el-tabs__nav-wrap:after {
    height: 1px;
}
</style>
